<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="shortcut icon" href="#"/>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <title>Title</title>
    <style>
        .wrapper {
            text-align: center;
        }

        .searchInput ,#changeToBlackList,#changeToUser{
            position: center;
            text-align:center;
            background-color: coral;
            color: white;
            border-color: chocolate;
            border-bottom-color: chocolate;
            border-right-color: chocolate;
            border-radius:7px;//按钮圆角锐化
        }
        .button1{
            position: center;
            text-align:center;
            background-color: #76b6ff;
            color: white;
            border-color: #76b6ff;
            border-bottom-color: #76b6ff;
            border-right-color: #76b6ff;
            border-radius:7px;//按钮圆角锐化
        }
        .list {
            text-align: center;
            margin: 10px auto auto auto;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <script>
        $(document).ready(function (){
            $('#userid').val("");
            $('#username').val("");
            var page=$('#blackpage').val();
            var page2=$('#userpage').val();
            getBlackList(page);
            getUserList(page2);
            countPage($('#allpage'),"black");
            countPage($('#allpage2'),"user");
        })
        function toPage(flag){
            var page=parseInt($('#blackpage').val());
            var blackpage=$('#blackpage');;
            var allpage=parseInt($('#allpage').attr('name'));
            var page2=parseInt($('#userpage').val());
            var userpage=$('#userpage');
            var allpage2=parseInt($('#allpage2').attr('name'));

            if(flag=="up1"){
                page--;
                if(page<1){
                    blackpage.val("1");
                    getBlackList("1");
                }else {
                    blackpage.val(page);
                    getBlackList(page);
                }
            }else if(flag=='next1'){
                page++;
                if(page>allpage){
                    blackpage.val(allpage);
                    getBlackList(allpage);
                }else {
                    blackpage.val(page);
                    getBlackList(page);
                }
            }else if(flag=='jump1'){
                if(page<1){
                    page=1;
                    blackpage.val("1");
                }else if(page>allpage){
                    page=allpage;
                    blackpage.val(allpage);
                }
                else {
                    blackpage.val(page);
                }
                getBlackList(page);
            }else if(flag=="up2"){
                page2--;
                if(page2<1){
                    userpage.val(1);
                    getUserList(1);
                }else {
                    userpage.val(page2);
                    getUserList(page2);
                }
            }else if(flag=="next2"){
                page2++;
                if(page2>allpage2){
                    userpage.val(allpage2);
                    getUserList(allpage2);
                }else {
                    userpage.val(page2);
                    getUserList(page2);
                }
            }else if(flag=="jump2"){
                if(page2<1){
                    page2=1;
                    userpage.val("1");
                }else if(page2>allpage2){
                    page2=allpage2;
                    userpage.val(allpage2);
                }
                else {
                    userpage.val(page2);
                }
                getUserList(page2);
            }
        }
        function toUserList(){
            var blackList =$('#id_blackListWindow').css('display');
            var userList =$('#id_userListWindow').css('display');
            $('#id_blackListWindow').css('display',blackList=='block'?'none':blackList);
            $('#id_userListWindow').css('display',userList=='none'?'block':userList);
            toPage("jump2");
        }
        function toBlackList(){
            var blackList =$('#id_blackListWindow').css('display');
            var userList =$('#id_userListWindow').css('display');
            $('#id_blackListWindow').css('display',blackList=='none'?'block':blackList);
            $('#id_userListWindow').css('display',userList=='block'?'none':userList);
            toPage("jump1");
        }
        function searchBlackUser(){
            var url="searchBlackUser";
            var userid=$('#userid').val();
            var username=$('#username').val();
            $.ajax({
                type:"get",
                url:url,
                data:{userid:userid,username:username},
                success:function (data){
                    var blackListBody=$("#blackListBody");
                    blackListBody.empty();
                    data.forEach(item => {
                        blackListBody.append(doCreateRow(item));
                    });
                }
            })
        }
        function getBlackList(paget){
            var url="viewBlackListJSON";
            $.ajax({
                type:"GET",
                url:url,
                data:{page:paget},
                success:function (data){
                    var blackListBody=$("#blackListBody");
                    if(data.length!=0) {
                        blackListBody.empty();
                        data.forEach(item => {
                            blackListBody.append(doCreateRow(item));
                        });
                    }
                }
            })
        }
        function doCreateRow(item){
            return `<tr>
                <td> ${item.userid} </td>
                <td> ${item.username} </td>
                <td><button class="searchInput" onclick="deleteBlackUser('blacklist',this)"><span>移除</span></button></td>
            </tr>`;
        }
        // <td><a href="deleteBlackUser?userid=${item.userid}">移除</a></td>
        function deleteBlackUser(listid,obj){
            console.log("移除黑名单");
            var userid = obj.parentElement.parentElement.cells[0].innerHTML;
            console.log(typeof (userid));
            console.log(userid);
            var url = "deleteBlackUser";
            $.ajax({
                type:"GET",
                url:url,
                data:{userid:userid},
                success:function (data){
                    console.log(data);
                    toPage("jump1");
                }
            })
        }

        function searchUser(){
            var url="searchUser";
            var userid=$('#userid2').val();
            var username=$('#username2').val();
            $.ajax({
                type:"get",
                url:url,
                data:{userid:userid,username:username},
                success:function (data){
                    var userListBody=$("#userListBody");
                    userListBody.empty();
                    data.forEach(item => {
                        userListBody.append(doCreateRow2(item));
                    });
                }
            })
        }
        function getUserList(pageg){
            var url="viewUserListJSON";
            $.ajax({
                type:"GET",
                url:url,
                data:{page:pageg},
                success:function (data){
                    var userListBody=$("#userListBody");
                    if(data.length!=0) {
                        userListBody.empty();
                        data.forEach(item => {
                            userListBody.append(doCreateRow2(item));
                        });
                    }
                }
            })
        }
        function addBlackUser(listname,obj){
            console.log("加入黑名单");
            var id = obj.parentElement.parentElement.cells[0].innerHTML;
            var name = obj.parentElement.parentElement.cells[1].innerHTML;
            var url = "addBlackUser";
            $.ajax({
                type:"get",
                url:url,
                data:{userid:id,username:name},
                success:function (data){
                    console.log(data);
                    toPage("jump2");
                }
            })
            console.log(id);
        }
        function doCreateRow2(item){
            return `<tr>
                <td name="userid"> ${item.userid} </td>
                <td name="username"> ${item.username} </td>
                <td name="role"> ${item.role}</td>
                <td name="usersex"> ${item.usersex}</td>
                <td name="userphone"> ${item.userphone}</td>
                <td name="useraddress"> ${item.useraddress}</td>
                <td name="but"><button class="searchInput" onclick="addBlackUser('userlist',this)"><span>加入黑名单</span></button></td>
            </tr>`;
        }
        // <td><a href="addBlackUser?userid=${item.userid}">加入黑名单</a></td>
        function countPage(id,listname){
            var url="countPage"
            console.log(id);
            $.ajax({
                type:"get",
                url:url,
                data:{listname:listname},
                success:function (data){
                    var allpage=id;
                    allpage.html(data);
                    allpage.attr('name',data);
                }
            })
        }
    </script>
    <div class="choice">
        <button id="changeToBlackList" name="changeToBlackList" onclick="toBlackList()">黑名单</button>
        <button id="changeToUser" name="changeToUser" onclick="toUserList()">用户</button>
    </div>
    <div class="blackList" th:fragment="blackListWindow" th:id="id_blackListWindow" style="display: block">
        <form>
            <label style="margin-top: 10px">UserId：<input type="text" id="userid" name="userid"/></label>
            <label style="margin-top: 10px">UserName：<input type="text" id="username" name="username"/></label>
            <input class="searchInput" type="button" value="Seach" onclick="searchBlackUser()"/>
        </form >
        <table border="1" class="list" id="blacklist">
            <thead id="listHead">
                <tr>
                    <th>userId</th>
                    <th>userName</th>
                    <th>action</th>
                </tr>
            </thead>
            <tbody id="blackListBody">
                <tr>
                    <td>加载中</td>
                </tr>
            </tbody>
        </table>
        <form>
            <input class="button1" type="button" id="up1" name="up1" value="上一页" onclick="toPage(name)"/>
            <label>Page:
                <input id="blackpage" name="blackpage" value="1" autocomplete="off"/>
            </label>
            <input class="button1" type="button" value="跳转到" id="jump1" name="jump1"  onclick="toPage(name)"/>
            <input class="button1" type="button" id="next1" name="next1" value="下一页" onclick="toPage(name)"/>
        </form>
        <b>共</b><b id="allpage"></b><b>页</b>
    </div>
    <div class="userList" th:fragment="userListWindow" th:id="id_userListWindow" style="display: none">
        <form>
            <label>UserId：<input type="text" id="userid2" name="userid2"/></label>
            <label>UserName：<input type="text" id="username2" name="username2"/></label>
            <input class="searchInput" type="button" value="Seach" onclick="searchUser()"/>
        </form>
        <table border="2" class="list" id="userlist">
            <thead id="listHead2">
            <tr>
                <th>userId</th>
                <th>userName</th>
                <th>userRole</th>
                <th>userSex</th>
                <th>userAddress</th>
                <th>userPhone</th>
                <th>action</th>
            </tr>
            </thead>
            <tbody id="userListBody">
            <tr>
                <td>加载中</td>
            </tr>
            </tbody>
        </table>
        <form>
            <input class="button1" type="button" id="up2" name="up2" value="上一页" onclick="toPage(name)"/>
            <label>Page:
                <input id="userpage" name="userpage" value="1" autocomplete="off"/>
            </label>
            <input class="button1" type="button" value="跳转到" id="jump2" name="jump2"  onclick="toPage(name)"/>
            <input class="button1" type="button" id="next2" name="next2" value="下一页" onclick="toPage(name)"/>
        </form>
        <b>共</b><b id="allpage2"></b><b>页</b>
    </div>
</div>
</body>
</html>